<template>
    <div>
      <div class="identify_form_area">
        <div class="identify_title">工业企业原始凭证上传情况</div>
        <BasicForm @register="registerForm_name" @submit="handleSubmit" />
       
      </div>
      <BasicTable @register="registerTable">
        <template #isExclude="{ record }">
          <div @click="handleCheckboxChange(record)" class="detail_btn">详情</div>
          <!-- <a-checkbox v-model:checked="record.exclude" @click="handleCheckboxChange(record)" /> -->
        </template>
      </BasicTable>
    </div>
  </template>
  
  <script setup lang="ts">
  
    import { BasicTable, useTable } from '@/components/Table';
    import { BasicForm, useForm } from '@/components/Form';
    import { getList } from './rule.api';
    import { nameFormSchema,  columns } from './rule.data';
  
    // 注册表单  --  采集名称
    const [registerForm_name, {   }] = useForm({
      schemas: nameFormSchema,
      showSubmitButton: false,
      showResetButton: false,
    });
  

  

  
  //  const  mockData = [
  //     {
  //       id: '1',
  //     }

  //  ]
    // 注册表格
    const [registerTable, { reload,  }] = useTable({
      api: () => {
        return getList({ industry: '1', ruleId: '1353563050407936001' });
      },
      // dataSource: mockData,
      columns: columns,
      showIndexColumn: false,
      bordered: true,
      rowKey: 'id',
      canResize: false,
      useSearchForm: false,
      pagination: false,
      scroll: {
        y: 300,
      },
    });
  
  
  
    // 搜索提交
    async function handleSubmit(values) {
      await reload({ searchInfo: values });
    }
  
    /**
     * 采集范围选择框状态改变
     * @param record
     */
    function handleCheckboxChange(record) {
      record.exclude = !record.exclude;
      console.log('当前记录状态改变:', record);
    }
  </script>
  
  <style scoped lang="scss">
    .identify_form_area {
        padding: 12px;
        background: #fff;
        margin: 10px;
    }
    .identify_title{
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }
    .detail_btn{
      font-size: 12px;
      color: #0c84f5;
    }

    
    .form_area {
      padding: 12px;
      background: #fff;
      margin: 10px;
    }
    
    .form_title {
      font-size: 16px;
      font-weight: 500;
      color: rgba(255, 255, 255);
      display: inline-block;
      padding: 3px 6px;
      background: #1890ff;
      border-radius: 2px;
      margin: 0 0 16px 0;
    }

    .submit_btn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
    }
  </style>
  